<template>
	<view class="content">
		<view class="skeleton">
			<m-for-skeleton :avatarSize="200" :row="3" :loading="loading" :isarc="key%2==0?'circular':'square'"
				v-for="(item,key) in 10" :key="key">
			</m-for-skeleton>
		</view>
		<view class="header neibinaju">
		</view>
		<view class="serch neibinaju">
			<view class="left">
				<span class="iconfont" style="">&#xe74f;</span>
			</view>
	        <view class="right">
	        	<input type="text" placeholder="搜索歌曲" @tap="gotoSearchPage"/>
	        </view>
		</view>
		<view class="bigimg neibinaju">
			<image src="/static/images/kowei.png" mode=""></image>
		</view>
		<view class="list neibinaju" v-for="(item, index) in list" :key="index">
			<view class="left" @click="handleNavtoList(item.id)">
				<image :src="item.coverImgUrl"></image>
			</view>
			<view class="right">
				<ul>
					<li v-for="(item2,index) in item.tracks" :key="index">
						{{index+1}}.{{item2.first}}{{item2.second}}
					</li>
				</ul>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		toplist
	} from "../../request/request.js"
	export default {
		data() {
			return {
				title: 'Hello',
				list: [],
				loading: true
			}
		},
		onLoad() {
			//          uni.request({
			//     url:"http://10.92.40.9:3000/toplist/detail",
			// 	method:"get"
			// }).then(res=>{res.data.list.slice(0,4)});
			toplist().then((res) => {
				this.list = res;
				console.log(this.list);

				// 数据加载成功后隐藏骨架屏
				this.hide();
			});
		},
		methods: {
			handleNavtoList(listid) {
				uni.navigateTo({
					url: '/pages/list/list?listid=' + listid,
				});
			},
			hide() {
				if (this.loading == true) {
					this.loading = false;
				} else {
					this.loading = true;
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			gotoSearchPage() {
			      // 跳转到搜索页面，假设搜索页面路径为 '/pages/search/search'
			      uni.navigateTo({
			        url: '/pages/search/search'
			      });
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 20rpx;

	}

	.neibinaju {
		margin-bottom: 15rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	image {
		width: 100%;
	}

	.header {
		width: 100%;
		height: 80rpx;
		background-color: aqua;
		border-radius: 50rpx;
	}

	.serch {
		display: flex;
		box-sizing: border-box;
		position: relative;
		width: 100%;
		height: 80rpx;
		padding-left: 10rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		background-color: white;
		background-color: #f7f7f7;
	}
	.serch .iconfont{
		font-size: 40rpx;
	}
	.serch input{
		height: 80rpx;
		margin-left: 10rpx;
	}

	.bigimg {
		width: 100%;
	}

	.bigimg image {}

	.list {
		width: 100%;
		display: flex;
	}

	.list .left {
		width: 250rpx;
		height: 250rpx;
	}

	.list .left image {
		width: 250rpx;
		height: 250rpx;
		border-radius: 25rpx;
	}

	.list .right {
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		font-size: 26rpx;
	}

	.list .right ul {
		padding: 0;
		list-style: none;
	}

	.list .right li {
		display: flex;
		white-space: nowrap;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>